<template>
  <div class="category">
    <van-sticky>
      <nav-bar class="nav-bar">
        <i class="iconfont icon-saoma" slot="left"></i>
        <div class="search" slot="center">
          <i class="iconfont icon-iconseach"></i>搜索
        </div>
        <i class="iconfont icon-msg" slot="right"></i>
      </nav-bar>
    </van-sticky>
    <div class="category-warp">
      <i-menu class="i-menu" :category="category" @change="querySubCategory" />
      <i-category class="i-category" :subCategory="subCategory" />
    </div>
  </div>
</template>

<script>
import { queryCategory, querySubCategory } from '../../api'
import ICategory from '../../components/i-category/i-category.vue'
import IMenu from '../../components/i-menu/i-menu.vue'

import NavBar from '../../components/nav-bar/nav-bar.vue'
export default {
  components: { IMenu, NavBar, ICategory },
  data() {
    return {
      category: [],
      subCategory: []
    }
  },
  mounted() {
    this.queryCategory()
    this.querySubCategory('3627')
  },
  methods: {
    async queryCategory() {
      const { data } = await queryCategory()
      this.category = data
    },
    async querySubCategory(maitKey) {
      const { data } = await querySubCategory(maitKey)
      this.subCategory = data
    }
  }
}
</script>

<style lang="less" scoped>
.category {
  background: white;
  .nav-bar {
    background: white;
    .icon-saoma,
    .icon-msg {
      font-weight: 700;
    }
    .search {
      background: #edeeee;
      border-radius: 15px;
      text-align: left;
      padding: 6px 10px;
      color: #707378;
      font-size: 12px;
      .icon-iconseach {
        font-size: 12px;
      }
    }
  }
  .category-warp {
    display: flex;
    .i-menu {
      height: calc(100vh - 44px - 52px);
      overflow: scroll;
    }
    .i-category {
      flex: 1;
      height: calc(100vh - 44px - 52px);
      overflow: scroll;
    }
    .i-menu::-webkit-scrollbar,
    .i-category::-webkit-scrollbar {
      width: 0;
    }
  }
}
</style>
